<template>
	<div class="foot-nav">
		<!-- 底部导航 -->
		<router-link to="/">
			<i><img src="../assets/img/homepage.svg"></i>
			<span class="ftn-text">电影</span>
		</router-link>
		<router-link to="/video">
			<i><img src="../assets/img/video.svg"></i>
			<span class="ftn-text">视频</span>
		</router-link>
		<router-link to="/shortvideo">
			<i><img src="../assets/img/shortvideo.svg"></i>
			<span class="ftn-text">小视频</span>
		</router-link>
		<router-link to="/perform">
			<i><img src="../assets/img/mine.svg"></i>
			<span class="ftn-text">演出</span>
		</router-link>
		<router-link to="/mine">
			<i><img src="../assets/img/mine.svg"></i>
			<span class="ftn-text">我的</span>
		</router-link>
	</div>
</template>

<style lang="less" scoped>
	.foot-nav {
		position: fixed;
		bottom: 0px;
		left: 0px;
		z-index: 11;
		background: white;
		border-top: 1px solid #d8d8d8;
		box-sizing: border-box;
		width: 100%;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.ftn-text {
			font-size: 12px;
		}

		&>a {
			// height: 100%;
			color: black;
			text-align: center;
			box-sizing: border-box;
			font-size: 12px;
			padding: 0 5px;
			position: relative;
			// 弹性布局
			display: flex;
			flex-direction: column;
			// 水平垂直居中
			justify-content: space-evenly;
			align-items: center;

			&.router-link-exact-active {
				color: #f03d37;
				text-align: center;
				box-sizing: border-box;
				position: relative;
			}

			&>i,
			i>img {
				width: 25px;
				height: 25px;
			}
		}
	}
</style>
